<!DOCTYPE html>
<html>

<head>
  <style>
    .grid-container {
      display: grid;
      /* xxx-columns：在 "水平方向" 上占用的空间大小 */
      grid-template-columns: 100px 200px 150px;

      /* xxx-rows：表示定义两行,第一行高度为100像素
        第二行高度为150像素 */
      grid-template-rows: 100px 150px;
      grid-gap: 10px;
    }

    .item1 {
      background-color: lightblue;
    }

    .item2 {
      background-color: lightgreen;
    }

    .item3 {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>

</html>